<template>
  <div>
    <slot name="header"></slot>
    <slot name="body" v-loading="dataSource.status()=='loading'">
      <el-table ref="table" stripe :data="dataSource.datas()" @expand-change="expandChange">
        <slot name="columns"></slot>
      </el-table>
    </slot>
    <slot name="footr">
      <el-pagination  :page-sizes="[10,30,50,100]" class="grid-pagination" :current-page="dataSource.page().page" :page-size="dataSource.page().size" background layout="prev, pager, next,sizes"
                      :total="dataSource.total() <=0?1:dataSource.total()"
                      @current-change="currentChange"
                      @size-change="handleSizeChange"
      >
      </el-pagination>
    </slot>
  </div>
</template>

<script>
  import DataSource from 'framework/components/dataset/DataSource'

  export default {
    name: "DataGrid",
    data() {
      return {
      }
      // return {
      //   gridDataSource: this.dataSource
      // }
    },
    props: {
      dataSource: {
        default: new DataSource()
      },
      noloaded: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      handleSizeChange(value){
        this.dataSource.page().size = value;
        this.dataSource.updatePage();
      },
      expandChange(row, expandedRows) {
        this.$emit('expand-change', row, expandedRows);
      },
      table() {
        return this.$refs['table'];
      },
      async currentChange(page) {
        this.dataSource.page(page);
        this.dataSource.search();
      }
    },
    mounted() {

      if(this.noloaded === false) {
        console.info('loaded...');
        if (this.dataSource != null)
          this.dataSource._updateDatas();
      }
      else {
        console.info('noloaded...');
      }
    }
  }
</script>

<style scoped>
  .grid-pagination {
    margin-top: 25px;
  }
</style>
